<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
	<meta charset="UTF-8">
	<title>页脚</title>
	<style>
		.content{
			min-height: 400px;
			padding-left: 60px;
			text-align: left;
		}
		footer{
			height: 100px;
			background: deepskyblue;
			width: 100%;
			left: 0;
			bottom: 0;
		}
		.box{
			width: 50px;
			background: #e5e5e5;
		}
	</style>
</head>
<body>
<select name="dt" id=""></select>
<div class="content">
	<ul>
		<li>浏览器当前窗口可视区域高度:"+$(window).height());</li>
		<li>浏览器当前窗口文档的高度:"+$(document).height());</li>
		<li>浏览器当前窗口文档body的高度:"+$(document.body).height());</li>
		<li>浏览器当前窗口文档body的总高度 包括border padding margin:"+$(document.body).outerHeight(true));</li>
		<li>浏览器当前窗口可视区域宽度:"+($(window).width()));</li>
	</ul>
	<ul>
		<li>  网页可见区域宽： document.body.clientWidth    </li>
		<li>  网页可见区域高： document.body.clientHeight  </li>
		<li>  网页可见区域宽： document.body.offsetWidth (包括边线的宽)</li>
		<li>  网页可见区域高： document.body.offsetHeight (包括边线的高)</li>
		<li>  网页正文全文宽： document.body.scrollWidth  </li>
		<li>  网页正文全文高： document.body.scrollHeight </li>
		<li>  网页被卷去的高： document.body.scrollTop  </li>
		<li>  网页被卷去的左： document.body.scrollLeft  </li>
		<li>  网页正文部分上： window.screenTop   </li>
		<li>  网页正文部分左： window.screenLeft   </li>
		<li>  屏幕分辨率的高： window.screen.height</li>
		<li>  屏幕分辨率的宽： window.screen.width  </li>
		<li>  屏幕可用工作区高度： window.screen.availHeight</li>
		<li>  屏幕可用工作区宽度： window.screen.availWidth </li>
	</ul>
</div>
<div class="box"></div>
<button type="button" id="top">回到顶部</button>
<footer>
</footer>


<script src="lib/jquery.js"></script>
<script>
	window.onload = function(){
		if(window.innerHeight > document.body.offsetHeight){
			document.querySelector('footer').style.position = 'absolute';
		}
	};
</script>
<script>
	document.querySelector('.box').style.height = 1900 + 'px';
	// 回到顶部
	var btn = document.getElementById('top');
	btn.addEventListener('click',function(){
		var body = document.body,
				result = body.scrollTop;
		body.style.marginTop = (-result)+'px';
		body.scrollTop = 0;
		body.style.transition = 'all .3s ease-in';
		body.style.marginTop = 0;
		body.addEventListener("transitionend",function(){
			body.style.transition = 'none';
		});
	});

  const scrollTo = (element, x) => {
  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = callback => setTimeout(callback, 17);
  }
  // 当前滚动高度
  let scrollX = element.scrollLeft;
  // 滚动step方法
  const step = () => {
    // 距离目标滚动距离
    const distanceX = x - scrollX;
    // 目标滚动位置
    scrollX += distanceX / 6;
    if (Math.abs(distanceX) < 1) {
      element.scrollTo(x, 0);
    } else {
      element.scrollTo(scrollX, 0);
      requestAnimationFrame(step);
    }
  };
  step();
};
</script>
</body>
</html>
